<template>
	<view class="block" :style="style" @click="click" :class="{'flex-1':isLoading}">
		<view class="block-title flex" v-if="title">
			<view class="line"> </view>
			<view class="">
				<text>{{title}}</text>
			</view>
		</view>
		<template v-if="isLoading">
			<view class="isLoading flex jc-center">
				<image src="../../static/images/default/btn-spin-grey.png"></image>
			</view>
		</template>
		<slot v-else></slot>
	</view>
</template>

<script>
	export default {
		name: "block",
		props: {
			isLoading: {
				default: false,
				type: Boolean,
			},
			gap: {
				default: '0',
				type: String,
			},
			spa: {
				default: '0',
				type: String,
			},
			radius: {
				default: '',
				type: String,
			},
			color: {
				default: '',
				type: String,
			},
			bgColor: {
				default: '',
				type: String,
			},
			title: {
				default: '',
				type: String,
			},
			mWidth: {
				default: '',
			type: [String,Number],
			},
			mHeight: {
				default: '',
				type: [String,Number],
			}
		},
		computed: {
			style() {
				const gap = this.gap.split(" ").filter(x => x);
				const spa = this.spa.split(" ").filter(x => x);
				const radius = this.radius.split(" ").filter(x => x);
				return {
					padding: gap.map(n => `${n}rpx`).join(' '),
					margin: spa.map(n => `${n}rpx`).join(' '),
					borderRadius: radius.map(n => `${n}rpx`).join(' '),
					background: this.bgColor,
					color: this.color,
					minWidth: `${parseFloat(this.mWidth)}rpx`,
					minHeight: `${parseFloat(this.mHeight)}rpx`,
				}
			}
		},
		data() {
			return {

			};
		},
		methods: {
			click() {
				this.$emit('click')
			},
		}
	}
</script>

<style lang="scss">
	.block {
		overflow: hidden;
		position: relative;
		background: var(--bg_block);
		border-radius: var(--m_radius20);
	}

	.isLoading {
		// position: absolute;
		z-index: 9;
		// width: 100%;
		height: 80vh;
		min-height: 400rpx;
		align-items: center;
		justify-content: center;
		// background: rgba(0, 0, 0, .2);

		image {
			width: 40rpx;
			height: 40rpx;
			// animation: rotate 1s infinite linear;

		}
	}

	.block-title {
		.line {
			margin-right: 10rpx;
			height: 30rpx;
			border-left: 6rpx solid #49A7E6;
			padding: 0 2rpx;
			border-right: 4rpx solid #49A7E6;
		}

		text {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
	}
</style>